<template>
  <div class="btn-pro">
    <!--      <img-->
    <!--        src="../../assets/images/ico/zdcx.png"-->
    <!--        border="0"-->
    <!--        onMouseOver="this.src='http://212.64.106.20:8888/static/img/soft_ico/ico-nginx.png'"-->
    <!--        onMouseOut="this.src='http://212.64.106.20:8888/static/img/soft_ico/ico-redis.png'"-->
    <!--      />-->
    <div
      class="btn-pro-box"
      v-for="(ant, index) in antData"
      @mouseenter="hoverindex = index"
      @mouseleave="hoverindex = -1"
      :key="index"
      @click="antClick(ant,index)"
    >
      <img
        :src="ant.img"
        v-if="hoverindex != index"
        alt=""
        class="btn-pro-box-img"
      />
      <img :src="ant.imgs" alt="" v-else class="btn-pro-box-imgs" />
      <div>{{ ant.text }}</div>
    </div>
  </div>
</template>

<script>
import app from "../../assets/images/ico/app.png";
import apps from "../../assets/images/ico/apps.png";
import car from "../../assets/images/ico/car.png";
import cars from "../../assets/images/ico/cars.png";
// import wt from "../../assets/images/ico/wt.png";
// import wts from "../../assets/images/ico/wts.png";
// import zjcq from "../../assets/images/ico/zjcq.png";
// import zjcqs from "../../assets/images/ico/zjcqs.png";
import zdcx from "../../assets/images/ico/zdcx.png";
import zdcxs from "../../assets/images/ico/zdcxs.png";
export default {
  name: "IndexBtnPro",
  props: {},
  data() {
    return {
      hoverindex: -1,
      antData: [
        {
          img: zdcx,
          imgs: zdcxs,
          text: "账单查询",
          type:'1',
          url: "https://investorservice.cfmmc.com/",
          id:''
        },
        {
          img: car,
          imgs: cars,
          text: "资金存取",
          type:'2',
          url: "ReadList",
          id:'118'
        },
        // {
        //   img: zjcq,
        //   imgs: zjcqs,
        //   text: "表格下载",
        //   type:'2',
        //   url: "ReadList",
        //   id:'121'
        // },
        {
          img: app,
          imgs: apps,
          text: "软件/APP下载",
          type:'2',
          url: "ReadList",
          id:'117'
        },
        // {
        //   img: wt,
        //   imgs: wts,
        //   text: "常见问题",
        //   type:'2',
        //   url: "ReadList",
        //   id:'120'
        // },
      ],
    };
  },
  components: {
    // 第三方组件实例化
  },
  computed: {},
  methods: {
    // 方法
    antClick(e,index) {
      console.log(index);
      this.$emit("antClick", e);
    },
  },
  mounted() {},
};
</script>

<style scoped>
@import "~@/assets/scss/style.css";
.btn-pro {
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
}
.btn-pro:after {
  content: "";
  width: 60px;
}
.btn-pro-box {
  color: #7c7c7c;
  font-size: 14px;
  width: 60px;
  margin-bottom: 10px;
  margin-top: 10px;
  cursor: pointer;
}
.btn-pro-box:hover {
  color: #000000;
}
.btn-pro-box-img {
  width: 30px;
}
.btn-pro-box-imgs {
  /*position: absolute;*/
  /*margin-left: -30px;*/
  width: 30px;
}
</style>
